<template>
	<div class="onboarding-parent-form">
		<!-- 错误页面 -->
		<error-page v-if="showError" />

		<template v-else>
			<!-- 基本信息组件 -->
			<basic-info-form v-show="currentStep === 0" :model-value="formData.basicInfo" ref="basicInfoRef" />

			<!-- 联系方式组件 -->
			<contact-info-form v-show="currentStep === 1" :model-value="formData.contactInfo" ref="contactInfoRef" />

			<!-- 教育经历组件 -->
			<education-form v-show="currentStep === 2" :model-value="formData.education" ref="educationRef" />

			<!-- 工作经历组件 -->
			<work-experience-form v-show="currentStep === 3" :model-value="formData.workExperience" ref="workExperienceRef" />

			<!-- 银行信息组件 -->
			<bank-info-form v-show="currentStep === 4" :model-value="formData.bankInfo" ref="bankInfoRef" />

			<!-- 其他信息组件 -->
			<other-info-form v-show="currentStep === 5" :model-value="formData.other" ref="otherRef" />

			<!-- 完成页面 -->
			<div v-show="currentStep === 6" class="completion-container">
				<completion-page />
			</div>

			<!-- 导航按钮和步骤条 -->
			<div class="form-navigation" v-show="currentStep < 6">
				<!-- 横向步骤条 -->
				<div class="horizontal-steps">
					<div
						v-for="(step, index) in formSteps"
						:key="step.key"
						class="step-item"
						:class="{ active: index === currentStep, completed: index < currentStep }"
						@click="goToStep(index)"
					>
						<div class="step-icon">
							<check-outlined v-if="index < currentStep" />
							<span v-else>{{ index + 1 }}</span>
						</div>
						<div class="step-title">{{ step.title }}</div>
					</div>
				</div>

				<!-- 导航按钮 -->
				<div class="navigation-buttons">
					<a-row :gutter="16">
						<a-col :span="12">
							<a-button block @click="prevStep" :disabled="currentStep === 0"> 上一步 </a-button>
						</a-col>
						<a-col :span="12">
							<a-button
								v-if="currentStep < formSteps.length"
								type="primary"
								block
								@click="nextStep"
								:loading="nextButtonLoading"
							>
								下一步
							</a-button>
						</a-col>
					</a-row>
				</div>
			</div>
		</template>
	</div>
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { useRoute } from 'vue-router'
	import { CheckOutlined } from '@ant-design/icons-vue'
	import BasicInfoForm from './basic.vue'
	import ContactInfoForm from './contact.vue'
	import EducationForm from './education.vue'
	import WorkExperienceForm from './work.vue'
	import BankInfoForm from './bank.vue'
	import OtherInfoForm from './other.vue'
	import CompletionPage from './complete.vue'
	import ErrorPage from './error.vue'
	import onboardingRegistryApi from '@/api/hrms/onboarding/registry/onboardingRegistryApi'

	const route = useRoute()
	const currentStep = ref(5)
	const showError = ref(false)
	const registryId = ref(null)
	const nextButtonLoading = ref(false)

	// 各子组件引用
	const basicInfoRef = ref()
	const contactInfoRef = ref()
	const educationRef = ref()
	const workExperienceRef = ref()
	const bankInfoRef = ref()
	const otherRef = ref()

	const formSteps = ref([
		{ title: '基本信息', key: 'basicInfo' },
		{ title: '联系方式', key: 'contactInfo' },
		{ title: '教育经历', key: 'education' },
		{ title: '工作经历', key: 'workExperience' },
		{ title: '银行信息', key: 'bankInfo' },
		{ title: '其他信息', key: 'other' }
	])

	// 所有表单数据
	const formData = reactive({
		basicInfo: {},
		contactInfo: {},
		education: {},
		workExperience: {},
		bankInfo: {},
		other: {}
	})

	// 页面加载时检查URL中的ID
	onMounted(() => {
		const id = route.params.id
		// 检查ID是否存在且为有效数字
		if (!id || isNaN(id)) {
			showError.value = true
		} else {
			registryId.value = id
			onboardingRegistryApi.getRegistryInfo(id).then((res) => {
				if (res) {
					if (res.formStatus === 6) {
						currentStep.value = 6
					} else if (res.formStatus >= 0 && res.formStatus < formSteps.value.length) {
						currentStep.value = res.formStatus
					}
					formData.basicInfo = {
						...res.basicEditBo,
						id: registryId.value
					} || { id: registryId.value }

					formData.contactInfo = {
						...res.contactEditBo,
						id: registryId.value
					} || { id: registryId.value }

					formData.education = {
						education: res.educationHistoryEditBoList,
						id: registryId.value,
						diplomaImage: res.diplomaImage
					} || { id: registryId.value }

					formData.workExperience = {
						workExperience: res.workExperienceEditBoList,
						id: registryId.value
					} || { id: registryId.value }

					formData.bankInfo = {
						...res.bankEditBo,
						id: registryId.value
					} || { id: registryId.value }

					formData.other = {
						noCrimeCert: res.noCrimeCert,
						creditReport: res.creditReport,
						id: registryId.value
					} || { id: registryId.value }
				} else {
					showError.value = true
				}
			})
		}
	})

	const nextStep = async () => {
		try {
			let saveResult = false
			nextButtonLoading.value = true
			switch (currentStep.value) {
				case 0:
					saveResult = await basicInfoRef.value.saveData()
					break
				case 1:
					saveResult = await contactInfoRef.value.saveData()
					break
				case 2:
					saveResult = await educationRef.value.saveData()
					break
				case 3:
					saveResult = await workExperienceRef.value.saveData()
					break
				case 4:
					saveResult = await bankInfoRef.value.saveData()
					break
				case 5:
					saveResult = await otherRef.value.saveData()
					break
			}
			if (saveResult !== false) {
				if (currentStep.value < formSteps.value.length - 1) {
					currentStep.value++
					nextButtonLoading.value = false
				} else {
					currentStep.value++
				}
			}
		} catch (error) {
			console.error('保存失败:', error)
			message.error('请检查表单填写是否正确')
		} finally {
			nextButtonLoading.value = false
		}
	}

	const prevStep = () => {
		if (currentStep.value > 0) {
			currentStep.value--
		}
	}

	const goToStep = (stepIndex) => {
		if (stepIndex < currentStep.value) {
			currentStep.value = stepIndex
		}
	}
</script>

<style scoped>
	.onboarding-parent-form {
		padding: 16px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.completion-container {
		width: 100%;
	}

	.form-navigation {
		position: sticky;
		bottom: 0;
		background-color: #f5f5f5;
		margin: 0 -16px;
		padding: 16px;
	}

	.horizontal-steps {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		position: relative;
	}

	.horizontal-steps::before {
		content: '';
		position: absolute;
		top: 15px;
		left: 0;
		right: 0;
		height: 2px;
		background-color: #e8e8e8;
		z-index: 1;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
		cursor: pointer;
	}

	.step-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: #e8e8e8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 4px;
		font-size: 14px;
		font-weight: bold;
		color: #999;
		transition: all 0.3s;
		border: 2px solid #e8e8e8;
	}

	.step-item.completed .step-icon {
		background-color: #52c41a;
		color: white;
		border-color: #52c41a;
	}

	.step-item.active .step-icon {
		background-color: #1890ff;
		color: white;
		border-color: #1890ff;
	}

	.step-title {
		font-size: 12px;
		color: #999;
		text-align: center;
		max-width: 80px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.step-item.active .step-title {
		color: #1890ff;
		font-weight: 500;
	}

	.navigation-buttons {
		width: 100%;
	}
</style>
